import { Component, OnInit, ViewChild } from '@angular/core';
import { DatePipe } from '@angular/common';
import { ExportFileService } from '@core/exportFile';
import { environment } from '../../../../environments/environment';
import { TableComponent } from './table.component';
declare const echarts: any;

@Component({
    selector: 'app-problemstatistics',
    templateUrl: './problemStatistics.component.html',
    styleUrls: ['./problemStatistics.component.less']
})

export class ProblemStatisticsComponent implements OnInit {
    @ViewChild('tcp', { static: true }) tcp: TableComponent;
    searchParam: any = {};
    apiUrl: any = {};
    tableScroll: any = {};
    headData = [];
    plainData = [];
    tempData = [];
    operaList: any = [
        { detailModal: false }
    ];
    paramType = '';
    paramTypeName = '';
    tabsIndex = 0;
    queryUrl = '';
    treeNodeStyle = { 'max-height': '300px', 'overflow-y': 'auto', 'overflow-x': 'hidden' };
    spanLeft = '17';
    spanRight = '7';
    colorList = ['#dd6b66', '#759aa0', '#e69d87', '#8dc1a9', '#ea7e53', '#eedd78', '#73a373', '#73b9bc', '#7289ab', '#91ca8c', '#f49f42'];

    constructor(
        private exportFile: ExportFileService,
        private datePipe: DatePipe
    ) { }

    ngOnInit() {
        this.searchParam.deadlineL = this.datePipe.transform(new Date(), 'yyyy-MM') + '-01';
        this.searchParam.deadlineR = this.datePipe.transform(new Date(), 'yyyy-MM-dd');
        this.tabCont(this.tabsIndex);
        this.apiUrl.detail = environment.project + '/safeProblem/groupDetail';
    }
    tabsChange(e) {
        this.tabsIndex = e.index;
        this.tabCont(e.index);
    }
    tabCont(type) {
        switch (type) {
            case 0:
                this.headData = [
                    { "name": "类别名称", "width": "" },
                    { "name": "未销号", "width": "18%" },
                    { "name": "已销号", "width": "18%" },
                    { "name": "总计", "width": "18%" },
                    { "name": "占比", "width": "18%" }
                ];
                this.plainData = [
                    "typeName", "nonOver", "over", "total", "ratio"
                ];
                this.paramTypeName = '按问题类别统计';
                this.paramType = 'class';
                this.queryUrl = environment.project + '/safeProblem/groupByType';
                break;
            case 1:
                this.headData = [
                    { "name": "部门名称", "width": "" },
                    { "name": "行车安全", "width": "6%" },
                    { "name": "劳动安全", "width": "6%" },
                    { "name": "外部环境", "width": "6%" },
                    { "name": "施工建设", "width": "6%" },

                    { "name": "特种设备", "width": "6%" },
                    { "name": "食品卫生", "width": "6%" },
                    { "name": "规章制度", "width": "6%" },
                    { "name": "综合保障", "width": "6%" },
                    { "name": "结合部", "width": "6%" },

                    { "name": "未销号", "width": "6%" },
                    { "name": "已销号", "width": "6%" },
                    { "name": "总计", "width": "6%" },
                    { "name": "占比", "width": "6%" }
                ];
                this.plainData = [
                    "orgName", "行车安全", "劳动安全", "外部环境", "施工建设",
                    "特种设备", "食品卫生", "规章制度:", "综合保障", "结合部",
                    "nonOver", "over", "total", "ratio",
                ];
                this.paramTypeName = '按责任部门统计';
                this.paramType = 'org';
                this.queryUrl = environment.project + '/safeProblem/groupByOrg';
                break;
            case 2:
                this.headData = [
                    { "name": "项目名称", "width": "" },
                    { "name": "广南信号车间", "width": "7%" },
                    { "name": "罗平信号车间", "width": "7%" },
                    { "name": "昆明南信号车间", "width": "8%" },
                    { "name": "电子车间", "width": "6%" },

                    { "name": "弥勒信号车间", "width": "7%" },
                    { "name": "曲靖北信号车间", "width": "8%" },
                    { "name": "曲靖信号车间", "width": "7%" },
                    { "name": "红果信号车间", "width": "7%" },
                    { "name": "车载车间", "width": "6%" },

                    { "name": "未销号", "width": "5%" },
                    { "name": "已销号", "width": "5%" },
                    { "name": "总计", "width": "5%" },
                    { "name": "占比", "width": "5%" }
                ];
                this.plainData = [
                    "projectName", "广南信号车间", "罗平信号车间", "昆明南信号车间", "电子车间",
                    "弥勒信号车间", "曲靖北信号车间", "曲靖信号车间:", "红果信号车间", "车载车间",
                    "nonOver", "over", "total", "ratio",
                ];
                this.paramTypeName = '按工作项目统计';
                this.paramType = 'project';
                this.queryUrl = environment.project + '/safeProblem/groupByProject';
                break;
        }
        this.search();
    }
    search() {
        let params = '';
        for (const item of Object.keys(this.searchParam)) {
            const data = this.searchParam[item];
            if (data || data === 0) {
                params += '&' + item + '=';
                if (data instanceof Date) {
                    params += this.datePipe.transform(data, 'yyyy-MM-dd');
                } else {
                    params += data;
                }
            }
        }
        this.tcp.loadList(this.queryUrl, params, (data) => {
            const total = [];
            const ratio = [];
            const ratioNumber = [];
            const classRatio = [];
            const orgRatio = [];
            const projectName = [];
            const projectRatio = [];
            let option = {};

            for (const item of data) {
                total.push(item.total);
                ratio.push(item.ratio);
                ratioNumber.push(Number(item.ratio.replace('%', '')));
                projectName.push(item.projectName);
                classRatio.push({
                    value: item.total,
                    name: item.typeName
                });
                orgRatio.push({
                    value: item.total,
                    name: item.orgName
                });
                projectRatio.push({
                    value: Number(item.ratio.replace('%', '')),
                    name: item.projectName
                });
            }
            switch (this.tabsIndex) {
                case 0:
                    this.spanLeft = '17';
                    this.spanRight = '7';
                    option = {
                        legend: {
                            left: 'center',
                            data: ratio
                        },
                        tooltip: {
                            trigger: 'item',
                            formatter: '{b}<br/>{c} ({d}%)'
                        },
                        series: [
                            {
                                type: 'pie',
                                radius: '65%',
                                center: ['50%', '50%'],
                                selectedMode: 'single',
                                data: classRatio,
                                label: {
                                    normal: {
                                        formatter: '{b} {c} \n({d}%)'
                                    }
                                }
                            }
                        ]
                    };
                    break;
                case 1:
                    this.spanLeft = '17';
                    this.spanRight = '7';
                    option = {
                        legend: {
                            left: 'center',
                            data: ratio
                        },
                        tooltip: {
                            trigger: 'item',
                            formatter: '{b}<br/>{c} ({d}%)'
                        },
                        series: [
                            {
                                type: 'pie',
                                radius: '65%',
                                center: ['50%', '50%'],
                                selectedMode: 'single',
                                data: orgRatio,
                                label: {
                                    normal: {
                                        formatter: '{b} {c} \n({d}%)'
                                    }
                                }
                            }
                        ]
                    };
                    break;
                case 2:
                    this.spanLeft = '24';
                    this.spanRight = '24';
                    option = {
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'shadow'
                            }
                        },
                        grid: {
                            top: '25%'
                        },
                        xAxis: [
                            {
                                type: 'category',
                                data: projectName
                            }
                        ],
                        yAxis: [
                            {
                                type: 'value'
                            }
                        ],
                        series: [
                            {
                                name: '总计',
                                type: 'bar',
                                data: total,
                                label: {
                                    normal: {
                                        show: true,
                                        position: 'top',
                                        formatter: '总计: {c}'
                                    }
                                },
                                itemStyle: {
                                    normal: {
                                        color: (res) => {
                                            return this.colorList[res.dataIndex]
                                        }
                                    }
                                }
                            },
                            {
                                name: '占比',
                                type: 'pie',
                                radius: '45%',
                                center: ['85%', '35%'],
                                data: projectRatio,
                                label: {
                                    normal: {
                                        show: true,
                                        formatter: '{b}\n占比: {c}%'
                                    }
                                }
                            }
                        ]
                    };
                    break;
            }
            const echartsObj = echarts.init(document.getElementById('echarts'));
            echartsObj.setOption(option, true);
            setTimeout(() => {
                echartsObj.resize();
            }, 200);
        });
    }
    detail(e) {
        this.tempData = e;
        this.modalShow('detailModal');
    }
    export() {
        const name = this.paramTypeName + ' ' + this.datePipe.transform(this.searchParam.deadlineL, 'yyyy-MM-dd') + '至' + this.datePipe.transform(this.searchParam.deadlineR, 'yyyy-MM-dd') + '.xls';
        this.exportFile.tableExport(document.getElementById("problemStatistics"), name);
    }

    modalShow(type) {
        this.operaList[type] = true;
    }
    modalHide(type) {
        this.operaList[type] = false;
    }
}
